<template>
  <div 
    class="fast-choose button-unselected"
    :class="classNames()"
    @click="handleFastChoose"
    >
    <span>{{fastChoose.context}}</span>
    <div class="right-top" v-show="selected"></div>
    <div class="right-top-text" v-show="selected"></div>
  </div>
</template>

<script>
export default {
  props: {
    fastChoose: {
      type: Object,
      default: function() {
        return {
          context: '快速选择'
        }
      }
    },
    showButtons: {
      type: Boolean
    },
    fastchooseDisabled: {
      type: Boolean
    },
    integrateDisabled: {
      type: Boolean
    },
    showIntegrate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selected: false
    }
  },
  methods: {
    handleFastChoose() {
      this.selected = !this.selected
      let disabled = this.integrateDisabled ? false : true
      
      this.$emit('toggle-seen', this.showButtons ? false : true, disabled)
    },
    classNames(selected) {
      let classList = []
      if (this.fastchooseDisabled) {
        classList.push('disabled')
      }
      if (this.selected) {
        classList.push('number-box-select-red')
      }
      return classList.join(' ')
    }
  }
}
</script>

<style lang="stylus">
@import '~@/assets/styles/variables.styl'
  .fast-choose 
    line-height 26px
    padding 0 10px
    border-radius 3px
    position relative
    cursor pointer
    &.disabled 
      color #ccc
      pointer-events: none
    &.number-box-select-red 
      transition all 0.3s ease
    .right-top 
      position absolute 
      right 0 
      top 0
      width 0 
      height 0 
      border-top 18px solid $color-theme-red 
      border-left 18px solid transparent
      transition all 0.3s ease
    .right-top-text 
      width 8px 
      height 4px 
      border-left 1px solid #fff
      border-bottom 1px solid #fff
      transform rotate(-45deg)
      position absolute 
      top 1px
      right 2px  
      transition all 0.3s ease
    
</style>
